<template>
  <div class="view-source-page-wrapper">
    <div class="relate-info-wrapper">
      <author-info-card :author="author"
      class="author-info-card"></author-info-card>
      <author-hot-source-card :sources="author.sources"
      class="author-hot-source-card"/>
    </div>

    <div class="source-wrapper">
      <source-card :source="source" :author="author"
      class="source-card"></source-card>

      <comment-card :comments="comments"
      :contentType="'source'"
      class="comment-card" @submitComment="comment"
      @fetchComments="fetchComments"
      ref="commentCard"></comment-card>
    </div>

    
    <ul class="operation-list">
      <li @click="like">
        <p class="iconfont icon-like" :class="{
          been: source.like
        }"></p>
      </li>
      <li @click="collect">
        <p class="iconfont icon-collect" :class="{
          been: source.collect
        }"></p>
      </li>
      <li @click="scrollToComment">
        <p class="iconfont icon-comment"></p>
      </li>
      <li @click="share">
        <p class="iconfont icon-share"></p>
      </li>
    </ul>
  </div>
</template>

<script>
import {assertLogin} from '@/utils/assert.js';
import { mapState } from 'vuex';

import SourceCard from '../components/resource/SourceCard.vue';

import AuthorInfoCard from '../components/browse/AuthorInfoCard.vue';
import AuthorHotSourceCard from '../components/browse/AuthorHotSourceCard.vue';
import CommentCard from '../components/browse/CommentCard.vue';

  export default {
    components: {
      AuthorInfoCard,
      AuthorHotSourceCard,
      SourceCard,
      CommentCard
    },
    data() {
      return {
        source_id: '',
        operations: [
          {
            iconClass: 'icon-like',
            name: 'like',
            showName: '赞'
          },
          {
            iconClass: 'icon-comment',
            name: 'comment',
            showName: '评论',
          },
          {
            iconClass: 'icon-collect',
            name: 'collect',
            showName: '收藏'
          },
          {
            iconClass: 'icon-share',
            name: 'share',
            showName: '分享'
          }
        ],
        author: {},
        source: {},
        comments: [],
        commentPage: 0,
        sources: [],
      }
    },
    computed: {
      ...mapState(['user']),
      userInfos() {
        return this.user.infos;
      }
    },
    watch: {
      $route: {
        handler(to) {
          if(to.name === 'source') {
            this.fetchBaseInfo();
          }
        },
        immediate: true
      }
    },
    methods: {
      fetchBaseInfo() {
        this.source_id = parseInt(this.$route.params.source_id);
        this.fetchSourceInfo();
      },
      fetchSourceInfo() {
        this.$fetch({
          name: 'source info',
          url: 'source/content',
          method: 'POST',
          data: {
            source_id: this.source_id
          }
        }).then(res => {
          if(res.data.success) {
            this.source = res.data.object;
            this.fetchAuthorInfo();
            this.fetchComments();
          } else {
            this.$alert({
              type: 'error',
              content: '获取资源内容失败'
            })
          }
        }).catch(error => {
          this.$alert({
            type: 'error',
            content: '获取资源内容失败'
          })
        })
      },
      fetchAuthorInfo() {
        this.$post({
          name: 'author info',
          url: 'author/info',
          data: {
            author_id: this.source.author_id
          }
        }).then(res => {
          if(res.data.success) {
            this.author = res.data.object;
            this.$fetch({
              name: 'author hot source',
              method: 'POST',
              url: 'author/source',
              data: {
                page: 1,
                sort: 0,
                author_id: this.source.author_id
              }
            }).then(res => {
              if(res.data.success) {
                this.author.sources = res.data.object.slice(0, 5);
              } else {
                this.$alert({
                  type: 'error',
                  content: '获取作者资源失败'
                })
              }
            }).catch(error => {
              this.$alert({
                type: 'error',
                content: '获取作者资源失败'
              })
            })
          } else {
            this.$alert({
              type: 'error',
              content: '获取作者信息失败'
            })
          }
        })
      },
      fetchComments() {
        this.$fetch({
          name: 'comments',
          url: 'source/content/comment',
          method: 'POST',
          data: {
            source_id: this.source_id,
            page: ++this.commentPage
          }
        }).then(res => {
          if(res.data.success) {
            if(res.data.object.length) {
              this.comments = this.comments.concat(res.data.object);
            }
            else this.commentPage--;
          } else {
            this.$alert({
              type: 'error',
              content: '获取评论失败'
            });
            this.commentPage--;
          }
        }).catch(error => {
          this.$alert({
            type: 'error',
            content: '获取评论失败'
          });
          this.commentPage--;
        })
      },
      like() {
        assertLogin().then(flag => {
          if(flag) {
            this.$post({
              name: 'like source',
              url: 'source/content/like',
              data: {
                source_id: this.source_id
              }
            }).then(res => {
              if(res.data.success) {
                this.fetchSourceInfo();
                if(this.source.like) {
                  this.$alert("取消点赞");
                } else {
                  this.$alert('点赞成功');
                }
              } else {
                if(this.source.like) {
                  this.$alert({
                    type: 'error',
                    content: "取消点赞失败"
                  });
                } else {
                  this.$alert({
                    type: 'error',
                    content: '点赞失败'
                  });
                }
              }
            }).catch(error => {
              if(this.source.like) {
                this.$alert({
                  type: 'error',
                  content: "取消点赞失败"
                });
              } else {
                this.$alert({
                  type: 'error',
                  content: '点赞失败'
                });
              }
            })
          }
        })
      },
      comment(content) {
        assertLogin().then(flag => {
          if(flag) {
            this.$post({
              name: 'comment',
              url: 'source/content/comment/submit',
              data: {
                content,
                source_id: this.source_id
              }
            }).then(res => {
              if(res.data.success) {
                this.$alert('评论成功！');
                this.fetchComments();
              } else {
                this.$alert({
                  type: 'error',
                  content: '评论失败'
                })
              }
            }).catch(error => {
              this.$alert({
                type: 'error',
                content: '评论失败'
              })
            })
          }
        })
      },
      collect() {
        assertLogin().then(flag => {
          if(flag) {
            this.$post({
              name: 'collect source',
              url: 'source/content/collect',
              data: {
                source_id: this.source_id
              }
            }).then(res => {
              if(res.data.success) {
                if(this.source.collect) {
                  this.$alert('移除收藏成功');
                } else {
                  this.$alert('收藏成功');
                }
                this.fetchSourceInfo();
              } else {
                if(this.source.collect) {
                  this.$alert({
                    type: 'error',
                    content: '移除收藏失败'
                  });
                } else {
                  this.$alert({
                    type: 'error',
                    content: '收藏失败'
                  });
                }
              }
            }).catch(error => {
              if(this.source.collect) {
                this.$alert({
                  type: 'error',
                  content: '移除收藏失败'
                });
              } else {
                this.$alert({
                  type: 'error',
                  content: '收藏失败'
                });
              }
            })
          }
        })
      },
      share() {
        const input = document.createElement('input');
        input.style.opacity = '0';
        document.body.appendChild(input);
        input.setAttribute("value", location.href);
        input.select();
        if(document.execCommand('copy')) {
          this.$alert("已复制网址");
        }
        document.body.removeChild(input);
      },
      scrollToComment() {
        this.$refs.commentCard.$el.scrollIntoView({
          behavior: 'smooth',
          top: 0
        })
      }
    },
    beforeRouteLeave() {
      this.$store.commit('renewHistorySourceAbstracts');
    }
  }
</script>

<style lang="less" scoped>
.view-source-page-wrapper {
  width: var(--innerWidth);
  --w1: calc(var(--innerWidth) * 0.28);
  --w2: calc(var(--innerWidth) * 0.71);
  margin: calc(var(--topNavHeight) + 10px) auto;
  min-height: 500px;

  .relate-info-wrapper {
    float: left;
    width: var(--w1);

    .author-info-card {
      --authorInfoCardWidth: var(--w1);
      --authorInfoCardHeight: 250px;
    }

    .author-hot-source-card {
      margin-top: 10px;
      --authorHotSourceCardWidth: var(--w1);
    }
  }

  .source-wrapper {
    float: right;
    width: var(--w2);

    .source-card {
      --sourceCardWidth: var(--w2);
    }

    .comment-card {
      margin-top: 20px;
      --commentCardWidth: var(--w2);
    }
  }

  .operation-list {
    position: fixed;
    top: 50%;
    right: 0;
    height: 300px;
    transform: translateY(-150px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    li {
      width: 50px;
      text-align: center;

      p {
        font-size: 25px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background-color: white;
        border-radius: 50%;

        &:hover,
        &.been {
          cursor: pointer;
          color: white;
          background-color: var(--blue);
        }
      }
    }
  }
}
</style>